<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<style type="text/css">
			.mui-table-view {
				margin-bottom: 15px;
			}
			
			.mui-content>.mui-table-view:first-child {
				/*margin-top: 0;*/
			}
			
			.me.mui-table-view .mui-media-object {
				max-width: 74px;
				height: 74px;
				border-radius: 5px;
			}
			
			.me li#my-info {
				height: 100px;
				padding: 0;
			}
			
			.me li#login h4 {
				line-height: 40px;
			}
			
			.me li.mui-table-view-cell h4 i.iconfont {
				font-weight: normal;
				margin: 0 4px;
				color:#FEB406;
			}
			
			.me li.mui-table-view-cell p {
				height: 24px;
				line-height: 24px;
				width: 90%;
			}
			
			.me li.mui-table-view-cell>a:not(.mui-btn) {
				margin: 0;
				padding: 12px;
				height: 100px;
			}
			
			.iconfont {
				margin-right: 12px;
				font-size: 20px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<!--头像区-->
			<ul class="mui-table-view mui-table-view-chevron me" id="me"></ul>

			<!--钱包-->
			<!--<h5 class="min-title">钱包</h5>-->
			<ul class="mui-table-view mui-table-view-chevron">
				<li class="mui-table-view-cell" id="wallet">
					<a id="" class="mui-navigate-right ">
						<i class="iconfont" style="color: #face4b;">&#xe626;</i>钱包</a>
				</li>
			</ul>

			<!--艺人
			<h5 class="min-title">艺人</h5>-->
			<ul class="mui-table-view mui-table-view-chevron">
				<li class="mui-table-view-cell" id="auth-info">
					<a id="" class="mui-navigate-right ">
						<i class="iconfont" style="color: #0552C5;">&#xe605;</i>实名认证</a>
				</li>
				<li class="mui-table-view-cell" id="my-notice">
					<a id="" class="mui-navigate-right">
						<i class="iconfont" style="color: #A521D0;">&#xe606;</i>通告</a>
				</li>
				<!--<li class="mui-table-view-cell" id="my-production">
					<a id="" class="mui-navigate-right">
						<i class="iconfont" style="color: #ff6e8f;">&#xe623;</i>小样&作品</a>
				</li>-->
				<li class="mui-table-view-cell" id="my-concerned-artist">
					<a id="" class="mui-navigate-right">
						<i class="iconfont" style="color: #F87300;">&#xe663;</i>我关注的帮办er</a>
				</li>
			</ul>

			<!--演艺
			<h5 class="min-title">演艺</h5>-->
			<ul class="mui-table-view mui-table-view-chevron">
				<li class="mui-table-view-cell" id="self-artshow">
					<a id="" class="mui-navigate-right">
						<i class="iconfont" style="color: #4BCD61;">&#xe698;</i>已发布的帮办</a>
				</li>
				<li class="mui-table-view-cell" id="my-involved-artshow">
					<a id="" class="mui-navigate-right">
						<i class="iconfont" style="color: #27c0ea;">&#xe86b;</i>我参与的帮办</a>
				</li>
				<li class="mui-table-view-cell" id="my-preference">
					<a id="" class="mui-navigate-right">
						<i class="iconfont" style="color: #fd0002;">&#xe61a;</i>关注帮办</a>
						
				</li>
			</ul>

			<!--设置-->
			<ul class="mui-table-view mui-table-view-chevron">
				<li class="mui-table-view-cell" id="setting">
					<a id="" class="mui-navigate-right">
						<i class="iconfont" style="color: #80afe7;">&#xe600;</i>设置</a>
				</li>
			</ul>
		</div>

		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.lazyload.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.lazyload.img.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.plusReady(function() {
				var me = document.getElementById("me");
				var lazyLoad = mui(me).imageLazyload({
					placeholder: '../images/holder1.png',
					autoDestroy: false
				});
				
				User.islogin() ? updateInfo() : noLogin();
				lazyLoad.refresh(true);
				function updateInfo() {
					var li = '<li class="mui-table-view-cell mui-media" id="my-info"><a class="mui-navigate-right">';
					if(User.getMyPic()){
						var headPic = Common.artistPic + User.getMyID() + User.getMyPic() + '?' + Math.random();
						li += '<img class="mui-media-object mui-pull-left" data-lazyload="' + headPic + '>';
					} else{
						li += '<img class="mui-media-object mui-pull-left" src="../images/holder1.png">';
					}
					li += '<div class="mui-media-body"><h4>' + User.getMyNickName();
					if(User.getMyRecState() == 1) {
						li += '<i class="iconfont">&#xe644;</i>';
					}
					li += '</h4><p><lable>账号：</lable><span>' + User.getMyUserName() + '</span></p>';
					if(User.getMyRecState() == -1) {
						li += '<p>帮办者审核未通过</p>';
					}
					li += '</div></a></li>';
					me.innerHTML = li;
				}

				function noLogin() {
					var li = '<li class="mui-table-view-cell mui-media" id="login">';
					li += '<img class="mui-media-object mui-pull-left" src="../images/holder3.png">';
					li += '<div class="mui-media-body"><h4>立即登录</h4></div></li>';
					me.innerHTML = li;
				}
				
				mui('.mui-table-view').on('tap', '.mui-table-view-cell', function() {
					if(User.islogin() || this.id == "setting") {
						if(this.id) {
							if(this.id == 'my-info') {
								plus.nativeUI.showWaiting();
							}
							Common.openWindow(this.id + '.html');
						}
					} else {
						Common.openWindow('login.html');
					}
				});
				
				// 监听login.html my-info.html setting.html modify-password.html页面的update事件，更新头像等信息
				document.addEventListener('update', function() {
					event.detail.logindata ? updateInfo() : noLogin();
					lazyLoad.refresh(true);
				})
			})
		</script>
	</body>

</html>